// components/lottie/index.js
Component({
  properties: {
    // Lottie动画文件路径
    src: {
      type: String,
      value: ''
    },
    
    // Canvas宽度
    width: {
      type: Number,
      value: 200
    },
    
    // Canvas高度
    height: {
      type: Number,
      value: 200
    },
    
    // 是否自动播放
    autoplay: {
      type: Boolean,
      value: true
    },
    
    // 是否循环播放
    loop: {
      type: Boolean,
      value: true
    },
    
    // 备用图片路径（当Lottie不支持时显示）
    fallbackImage: {
      type: String,
      value: ''
    }
  },

  data: {
    canvasId: '', // Canvas ID
    animation: null // 动画实例
  },

  lifetimes: {
    attached() {
      // 组件实例进入页面节点树时执行
      this.initCanvas();
    },
    
    detached() {
      // 组件实例被从页面节点树移除时执行
      this.destroyAnimation();
    }
  },

  observers: {
    'src': function(src) {
      if (src) {
        this.loadAnimation();
      }
    }
  },

  methods: {
    // 初始化Canvas
    initCanvas() {
      const canvasId = `lottie_${Math.random().toString(36).substr(2, 9)}`;
      this.setData({ canvasId });
      
      // 检查是否支持Canvas
      if (this.checkCanvasSupport()) {
        if (this.data.autoplay && this.data.src) {
          this.loadAnimation();
        }
      }
    },
    
    // 检查Canvas支持
    checkCanvasSupport() {
      // 简单检查，实际项目中可能需要更详细的检测
      return true;
    },
    
    // 加载动画
    loadAnimation() {
      // 在真实项目中，这里会加载Lottie动画文件
      // 由于微信小程序原生不支持Lottie，我们使用备用方案
      console.log('Loading Lottie animation:', this.data.src);
      
      // 触发动画加载完成事件
      this.triggerEvent('load');
    },
    
    // 播放动画
    play() {
      if (this.data.animation) {
        // 播放动画逻辑
        console.log('Playing animation');
        this.triggerEvent('play');
      }
    },
    
    // 暂停动画
    pause() {
      if (this.data.animation) {
        // 暂停动画逻辑
        console.log('Pausing animation');
        this.triggerEvent('pause');
      }
    },
    
    // 停止动画
    stop() {
      if (this.data.animation) {
        // 停止动画逻辑
        console.log('Stopping animation');
        this.triggerEvent('stop');
      }
    },
    
    // 销毁动画
    destroyAnimation() {
      if (this.data.animation) {
        // 销毁动画逻辑
        this.data.animation = null;
      }
    },
    
    // 动画完成回调
    onAnimationComplete() {
      this.triggerEvent('complete');
    }
  }
})

// 添加导出语句，确保组件可以被其他模块引用
module.exports = {
  // 可以根据需要添加组件的公共方法或属性
};